<template>
  <div>
    <div class="container">
      <span class="logo" @click="goHome">
        <img class="logo-img" src="/img/bosssoft.png" alt="" />
      </span>
      <i-input
        v-model="query.name"
        size="large"
        class="search"
        placeholder="输入你想查找的商品"
        ref="search"
      >
        <Button slot="append" icon="ios-search" @click="search"></Button>
      </i-input>
      <Tag
        v-for="(item, index) in promotionTags"
        :key="index"
        closable
        @on-close="closeTags(index)"
        ><span @click="selectTags(index)">{{ item }}</span></Tag
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      // 推荐搜索关键词
      promotionTags: ['手机', '华为', '小米', '1+', '魅族'],
      // 搜索条件
      query: {
        name: '',
        page: 1,
        size: 10
      }
    }
  },

  methods: {
    goHome() {
      this.$router.push({ path: '/' })
    },
    closeTags(index) {
      this.promotionTags.splice(index, 1)
    },
    selectTags(index) {
      this.query.name = this.promotionTags[index]
    },
    search() {
      // 加入随机数，实现重复搜索同一个值
      this.query.random = Math.random()
      this.$emit('changeQuery')
      this.$router.push({
        path: `/goodsList`, query: this.query
      })
    },
    focusInput() {
      this.$refs.search.focus()
    }
  },
  mounted() {
    // 按下s进入搜索框
    if (process.client) {
      document.addEventListener('keyup', (e) => {
        if (e.keyCode === 83) {
          this.focusInput()
        }
      })
    }
  }
}
</script>

<style scoped>
.logo {
  position: absolute;
  left: -241px;
  cursor: pointer;
}

.logo-img {
  position: relative;
}
.container {
  position: relative;
  padding-top: 15px;
  margin: 0px auto;
  margin-bottom: 15px;
  width: 460px;
}
.search {
  margin: 5px 0px;
}
</style>
